<template>
    <div class="message-notice">
        <div class="mesasge-notice-top">
            消息管理
            <i @click="setExcuteMegs([])" class="el-icon-delete"></i>
        </div>
        <div class="message-list">
            <div class="message-list-item" v-for="(item, index) in excuteMegs" :key="index">
                <i @click="handleClose(index)" class="el-icon-close"></i>
                <div>{{item.time}}</div>
                <div class="message-copy">
                    <i class="el-icon-error"></i>
                    <span class="msg-con">{{item.content}}</span>
                    <i @click="handleCopy(item.content)" class="el-icon-document-copy"></i>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
    name: 'MessageNotice',
    computed: {
        ...mapGetters({
            excuteMegs: 'common/getExcuteMegs'
        })
    },
    methods: {
        ...mapMutations({
            setExcuteMegs: 'common/setExcuteMegs'
        }),
        handleCopy (text) {
            let input = document.createElement('input')
            input.value = text
            document.body.appendChild(input)
            input.select()
            document.execCommand('Copy')
            document.body.removeChild(input)
            this.$message.success('复制成功')
        },
        handleClose (i) {
            this.excuteMegs.splice(i, 1)
            localStorage.setItem('excuteMegs', JSON.stringify(this.excuteMegs))
            this.setExcuteMegs(this.excuteMegs)
        }
    }
}
</script>
<style lang="less">
    .message-notice {
        font-size: 12px;
        height: 100%;
        width: 100%;
        padding: 0 10px;
        position: relative;
        .el-icon-delete {
            cursor: pointer;
            color: #909399;
            position: absolute;
            right: 10px;
            top:10px;
            font-size: 20px;
        }
        .mesasge-notice-top {
            text-align: center;
            line-height: 40px;
            border-bottom: 1px solid #e4e7ed;
        }
        .message-list {
            height: calc(100% - 40px);
            overflow-x: hidden;
            overflow-y: auto;
            .message-list-item {
                border-radius: 4px;
                margin-top: 8px;
                padding: 10px;
                background-color: #fff;
                box-shadow: 1px 1px 3px 0 rgba(34,34,34,.32);
                position: relative;
                i {
                    font-size: 20px;
                    color: #f56c6c;
                }
                .el-icon-document-copy {
                    color: #666;
                }
                .el-icon-close {
                    position: absolute;
                    top: 5px;
                    right: 5px;
                    display: none;
                    cursor: pointer;
                    color: #909399;
                }
                &:hover .el-icon-close {
                    display: block;
                }
                .msg-con {
                    width: 210px;
                    white-space: pre-wrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
            }
            .message-copy {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                padding-top: 8px;
                .el-icon-document-copy {
                    cursor: pointer;
                }
            }
        }
    }
</style>
